<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浏览器工作流</title>
  <link rel="stylesheet" href="../styles/popup.css">
</head>
<body>
  <div class="container">
    <header class="header">
      <img src="../icons/icon.png" alt="Browser Work" class="logo">
      <h1>浏览器工作流</h1>
    </header>
    
    <main class="main-content">
      <div class="workflow-section">
        <h2>工作流操作</h2>
        
        <!-- 录制控制 -->
        <div class="record-control">
          <button id="record-btn" class="record-btn">
            <span class="record-icon">⏺</span>
            <span class="record-text">开始录制</span>
          </button>
          <div class="record-status" id="record-status">
            <span class="status-dot"></span>
            <span class="status-text">未录制</span>
          </div>
        </div>

        <!-- 导出功能 -->
        <div class="export-section" id="export-section" style="display: none;">
          <div class="export-buttons">
            <button id="export-btn" class="primary-btn">
              <span>💾</span> 导出录制文件
            </button>
            <button id="cancel-btn" class="cancel-btn">
              <span>❌</span> 取消
            </button>
          </div>
          <div class="export-info" id="export-info">
            已录制 <span id="actions-count">0</span> 个操作
          </div>
        </div>

        <!-- 回放控制 -->
        <div class="playback-section">
          <button id="playback-btn" class="primary-btn">
            <span>🎬</span> 导入并回放
          </button>
          <input type="file" id="import-file" accept=".json" style="display: none;">
          <div class="playback-info">
            <small>点击按钮选择JSON文件并自动开始回放</small>
          </div>
          <div class="playback-config" id="playback-config">
            <div class="config-item">
              <span class="config-label">⏱️ 回放模式:</span>
              <span class="config-value" id="timing-mode">加载中...</span>
            </div>
            <div class="config-item">
              <span class="config-label">⚡ 回放速度:</span>
              <span class="config-value" id="playback-speed">加载中...</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 配置 -->
      <div class="config-section">
        <button id="options-btn" class="secondary-btn">
          <span>⚙️</span> 选项配置
        </button>
      </div>
      
      <div class="status">
        <span id="status-text">就绪</span>
      </div>
    </main>
  </div>
  
  <script src="popup.js"></script>
</body>
</html> 